<script setup lang="ts" name="HjLogin">
import { ref, reactive, onMounted } from "vue"
import type { Login } from "@/types/login"
import { CircleClose, UserFilled } from "@element-plus/icons-vue"
import { ElNotification, ElMessage } from "element-plus"
import { getTimeState } from "@/utils"
import { useRouter } from "vue-router"
import { ElForm } from "element-plus"
const loginForm = reactive<Login.ReqLoginForm>({
  username: "",
  password: ""
})
type FormInstance = InstanceType<typeof ElForm>
const loginFormRef = ref<FormInstance>()
const loginRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }]
})
const loading = ref(false)
const router = useRouter()

// 重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const login = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (!valid) return
    if (loginForm.username === "admin" && loginForm.password === "123456") {
      router.push("/home")
      ElNotification({
        title: getTimeState(),
        message: "欢迎登录",
        type: "success",
        duration: 3000
      })
    } else {
      ElMessage.error("账号或密码错误 🤔")
    }
  })
}

onMounted(() => {
  // 监听 enter 事件（调用登录）
  document.onkeydown = (e: KeyboardEvent) => {
    e = (window.event as KeyboardEvent) || e
    if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
      if (loading.value) return
      login(loginFormRef.value)
    }
  }
})
</script>

<template>
  <div class="HjLogin">
    <el-card>
      <div class="login-form">
        <div class="login-logo">
          <img class="login-icon" src="@/assets/logo.svg" alt="" />
          <h2 class="logo-text">HuaJ-Admin</h2>
        </div>
        <el-form ref="loginFormRef" :model="loginForm" size="large" :rules="loginRules">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="用户名:admin ">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <user />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="密码:123456"
              show-password
              autocomplete="new-password"
            >
              <template #prefix>
                <el-icon class="el-input__icon">
                  <lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="login-btn">
          <el-button :icon="CircleClose" round size="large" @click="resetForm(loginFormRef)"> 重置 </el-button>
          <el-button :icon="UserFilled" round size="large" type="primary" :loading="loading" @click="login(loginFormRef)">
            登录
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
@import "./LoginItem.scss";
</style>
